<header class="container-fluid main-color" id="embed_page_header">
    <div class="row">
        <div class="col-2 col-sm-1 col-md-1 text-center"><a href="javascript:;" role="button" class="btn historyBack"><i class="ico mdi mdi-chevron-left"></i></a></div>
        <div class="col-8 col-sm-10 col-md-10">
            <nav class="tabbable">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <a class="nav-item nav-link" [routerLink]="[ '/member/home/profile' ]">个性签名</a>
                    <a class="nav-item nav-link active" href="javascript:;">选择头像</a>
                    <a class="nav-item nav-link" [routerLink]="[ '/member/home/social' ]">社交信息</a>
                    <a class="nav-item nav-link" [routerLink]="[ '/member/home/passport' ]">修改密码</a>
                </div>
            </nav>
        </div>
        <div class="col-2 col-sm-1 col-md-1 text-center"><a href="javascript:;" role="button" class="btn"><i class="ico mdi mdi-search"></i></a></div>
    </div>
</header>
<div id="embed_page">
    <div class="container">
        <div class="main-color">
            <div class="alert alert-info" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>💡&nbsp;点击图片变更头像. 当前选中的头像为绿色边框
            </div>
            <div class="row mt20" id="avatarBox">
                <!-- foreach -->
                <div class="col-6 col-sm-3 col-md-2 text-center" *ngFor="let item of items">
                    <a href="javascript:;" class="thumbnail trans-bg member-avatar-section">
                        <img src="{{item.link}}" 
                        class="rounded-circle member_default_avtar" 
                        [attr.data-file]="item.name" 
                        [ngClass]="{'active': item.name === forceAvatarFileName}" 
                        style="width:100px;height:100px" 
                        (click)="updateAvtar(item.name)" 
                        (mouseover)="changeStyle($event)" 
                        (mouseout)="changeStyle($event)"/>
                    </a>
                </div>
                <!-- foreach -->
            </div>
        </div>
    </div>
</div>
<footer class="container-fluid main-color" id="embed_page_footer">
    <div class="row">
        <div class="col-3 col-sm-3 col-md-3 text-center"><a href="javascript:;" role="button" class="btn btn-primary"><i class="ico-sm mdi mdi-settings"></i><span class="d-none d-sm-inline">&nbsp;设置</span></a></div>
        <div class="col-3 col-sm-3 col-md-3 text-center"><a [routerLink]="['/member/home/topic']" role="button"><i class="ico-sm mdi mdi-looks"></i><span class="d-none d-sm-inline">&nbsp;话题</span></a></div>
        <div class="col-3 col-sm-3 col-md-3 text-center"><a [routerLink]="['/message/']" role="button" id="primary-panel-notice"><i class="ico-sm mdi mdi-notifications"></i><span class="d-none d-sm-inline">&nbsp;消息</span>&nbsp;<sup class="device-notice-ele"></sup></a></div>
        <div class="col-3 col-sm-3 col-md-3 text-center"><a [routerLink]="['/member/home/']" role="button"><i class="ico-sm mdi mdi-account"></i><span class="d-none d-sm-inline">&nbsp;我</span></a></div>
    </div>
</footer>